<template>
  <div class="container">
    <div class="title">
      <h1>开发者路线图</h1>
      <p>浏览由社区推动的、不断更新的路线图列表。</p>
      <button>使用人工智能生成路线图</button>
    </div>
    <div class="ul_container">
       <ul>
      <li>Frontend Beginner</li>
      <li>Frontend</li>
      <li>API Design</li>
      <li>Android</li>
      <li>Software Architect</li>
      <li>AI and Data Scientist</li>
      <li></li>
      <li>MLOps</li>
      <li>Client Side Game Dev</li>
      <li>Blockchain</li>
      <li>Backend Beginner</li>
      <li>Backend</li>
      <li>QA</li>
      <li>IOS</li>
      <li>Technical Writer</li>
      <li>AI Engineer</li>
      <li>Product Manager</li>
      <li>Server Side Game Dev</li>
      <li>Cyber Security</li>
      <li>DevOps Beginner</li>
      <li>Full Stack</li>
      <li>DevOps</li>
      <li>PostgreSQL</li>
      <li>DevRel Enginner</li>
      <li>Data Analyst</li>
      <li>Engineering Manager</li>
      <li>UX Design</li>
    </ul>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
  max-width: 600px;
}

h1 {
  padding: 0px 116.14px;
  text-align: center;
  font-family: 'Segoe UI Symbol';
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
}

p {
  font-family: 'Segoe UI Symbol';
  font-style: normal;
  font-weight: 400;
  font-size: 17.5781px;
  line-height: 28px;
  text-align: center;
}

button {
  padding: 6px 14px;
  width: 204px;
  height: 36px;
  background: #D1D5DB;
  border-radius: 6px;
  border: none;
}

.ul_container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(0deg, #FFFFFF, #FFFFFF), #FFFFFF;
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列均匀分配 */
  gap: 20px;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列均匀分配 */
  gap: 20px;
  text-align: center;
}

li {
  width: 196px; /* 设置宽度 */
  height: 38px; /* 设置高度 */
  padding: 9px 13px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  white-space: nowrap; /* 防止文字换行 */
  text-overflow: ellipsis; /* 如果文字溢出则显示省略号 */
  overflow: hidden; /* 如果文字溢出则隐藏 */
  display: block; /* 默认为 block，文字默认左对齐 */
}
</style>
